<template>
  <div class="loginP">
    <div class="mainTitle">欢迎来到云店宝</div>

    <div class="classesifyP">
      <div class="classesify">
        <div :class="selectIfy==1?'classesify-puc':'classesify-pucs' "  @click="pucM" >代理</div>
        <!-- <div class="classesify-pucs" @click="pucM" v-else>代理12</div> -->

        <div class="classesify-bus" @click="busM" v-if="selectIfy === 1">商户</div>
         <div class="classesify-buss"  @click="busM" v-else>商户</div>
      </div>
    </div>

    <div  class="user-pwd" >

        <div  class="userP" >
            <img   :style="{ width:'1.5rem' }"  src="../../style/image/login/A6.png" alt="">
            <div  class="inputC">
             <input    type="text" placeholder="账号" >
            </div>
             <img  class="rightIcon"  src="../../style/image/login/A3.png" alt="">   
        </div>

        <div class="pwdP" >
           <img   :style="{ width:'1.5rem' }" src="../../style/image/login/A2.png" alt="">
            <div  class="inputC">
             <input    type="text" placeholder="密码" >
            </div>
            <img   class="rightIcon" src="../../style/image/login/A4.png" alt="">
        </div>

    </div>

    <div class="loginBtnP"  >
     <div  class="loginBtn" >
      登陆
    </div>
    </div>

    <div class="forgot-register" >
      <div  @click="goforGotP"  class="forgot">
        忘记密码
      </div>
      <div  class="register" @click="goRegister" >
        注册账号
      </div>
    </div>

    <!-- <div>123321321321312321--test----{{msg}}</div>
            <div>123321321321312321--test----{{test1}}</div>
            <div>123321321321312321--test----{{msgC}}</div> -->
    <!-- <u-button type="error">危险按钮</u-button>
            <div>
             子组件：我的子组件的数据 <button @click="childPropMsg">小——》大点击给父组件发送数据</button>
            </div> -->
  </div>
</template>

<script lang='ts' >
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import uField from '@/uview-ui//components/u-field/u-field.vue'

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",

  //         filters:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   },
  //   directives:{
  //     Test(arg: string){
  //       return arg + "  我来刷点存在感"
  //     }
  //   }
})
export default class extends Vue {
  // props: ['postTitle'],

  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  childMsg: string = "自组件的数据";
  selectIfy: any = 1;

  //test:string=msg
  test1: string = "eqweqweqweqw";

  msgC: string = "子组件的msgC数据";

  created() {
    console.log("888123123123123123自组件");
    console.log("999", this);
    console.log("父组件传递的参数:", this.$props.msg); // one
  }

  mounted() {
    //  console.log('父组件传递的参数:',this.$parent)   //暂时不考虑
  }

  pucM() {
    console.log(12312312);
    this.selectIfy = 1;
  }
  goRegister() {
    console.log(123);

   uni.navigateTo({
    url: '../register/register'
    });
  }
  goforGotP(){
    console.log(123);

   uni.navigateTo({
    url: '../forgotP/index'
    });

  }
  // busM=()=>{
  //    console.log(99999)

  //     this.selectIfy=2
  //     this.$forceUpdate()
  //  //  this.$set(this.selectIfy, 1,2)

  // //    window.reload()

  //     console.log(99999,this.selectIfy)
  // }
  busM() {
    //方法中获取this
    this.selectIfy = 2;
  }

  @Emit("bindSend") //@Emit()不传参数,那么它触发的事件名就是它所修饰的函数名.
  send(msgC: string) {
    //return 123      //如果没有返回值 那么传递的参数就是参数
  }

  childPropMsg() {
    //方法中获取this
    this.msgC = "子组件的msg数据,被传给了父组件";
    this.send(this.msgC);
  }

  @Watch("$route")
  routechange(to: any, from: any) {
    // if (to.query.name!=from.query.name) {
    // }
    console.log(to);
  }

  //         // dynamic component
  // 51   $refs!: {
  // 52     helloComponent: Hello
  // 53   }
}
</script>

<style scoped>
.loginP {
  padding: 2rem;
}

  .mainTitle {
    text-align: center;
    font-size: 1.1rem;
    padding: 2rem;
  }

  .classesifyP {
    text-align: center;
    display: flex;
    justify-content: center;
   
  }
   .classesify {
      width: 11rem;
      height: 2.1875rem;
      border: 1px solid #02af74;

      display: flex;
      align-items: center;
      border-radius: 100px;
      /* //   background-color: red; */
    }

  .classesify-puc {
    width: 50%;
    font-size: 0.6rem;
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px;
    height: 100%;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #02af74;
  }
  .classesify-pucs {
    width: 50%;
    font-size: 0.6rem;
    border-bottom-left-radius: 100px;
    border-top-left-radius: 100px;
    height: 100%;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
  }

  .classesify-bus {
    width: 50%;
  }
  .classesify-buss {
    width: 50%;
    font-size: 0.6rem;
    border-bottom-right-radius: 100px;
    border-top-right-radius: 100px;
    height: 100%;
    line-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #02af74;
  }


  .userP {
    display: flex;
    align-items: center;
    margin: 4rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
     // justify-content: space-between;
  }
  .pwdP {
    display: flex;
    align-items: center;
    margin: 2rem 0rem 1rem 0rem;
    padding: 0.3125rem 0rem;
    border-bottom: 1px solid #dfdfdf;
    /* // justify-content: space-between; */
  }
  .inputC{
     width: 80%;
     padding-left: 1rem;
  }
  .rightIcon{
   margin: 0 auto;
  }


.loginBtnP {
  width: 100%;
  display: flex;
  justify-content: center;
 
}
 .loginBtn {
    width: 14rem;
    padding: 0.5rem;
    background-color: #02af74;
    border-radius: 0.5rem;
    color: white;
    text-align: center;
    font-size: 1.1rem;
  }
.forgot-register {
  padding: 1rem 0rem;
  display: flex;
  justify-content: space-between;
  color: #747474;
}

.user-pwd{
  margin-bottom: 2rem;
}
</style>